<template>
  <div class="app-container" v-loading="bfLoading">
    <h2 style="text-align: center">字体和七步法</h2>

    <el-steps
      :active="4"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="添加字体" />
      <el-step title="添加七步" />
    </el-steps>
    <div>
      <el-form :inline="true">
        <el-form-item>
          <el-select
            v-model="buzhou"
            placeholder="请选择类型"
            @change="buzhouChange"
          >
            <el-option label="欣赏" :value="0"> </el-option>
            <el-option label="认读" :value="1"> </el-option>
            <el-option label="观察" :value="2"> </el-option>
            <el-option label="分析" :value="4"> </el-option>
            <el-option label="笔法" :value="3"> </el-option>
            <el-option label="视频" :value="7"> </el-option>
            <el-option label="对比" :value="5"> </el-option>
            <el-option label="随堂练习" :value="6"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addBrush(0)" :disabled="xzBtn"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="bfList" stripe v-loading="bfLoading" style="width: 100%">
  <el-table-column type="expand" padding="0">
    <template slot-scope="props">
        <el-table
        :data="props.row.children"
        style="width: 100%;">
        <el-table-column
        prop="word"
        header-align="center"
        align="center"
        label="字"
      ></el-table-column>
      <el-table-column
        prop="border"
        header-align="center"
        align="center"
        label="顺序"
      ></el-table-column>
      <el-table-column
        prop="wordVideo"
        header-align="center"
        align="center"
        label="字视频"
      >
        <template slot-scope="scope">
          <video
            :src="scope.row.wordVideo"
            controls="controls"
            class="avatar"
          >
            您的浏览器不支持视频播放
          </video>
        </template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="lineWritingDescription" header-align="center" align="center" label="行笔路线描述"></el-table-column>
<el-table-column prop="cartoonWritingDescription" header-align="center" align="center" label="书写动画描述"></el-table-column>
<el-table-column prop="brushPicture" header-align="center" align="center" label="笔法字体图片">
    <template slot-scope="scope">
          <el-image :src="scope.row.brushPicture"></el-image></template
      ></el-table-column>
      <el-table-column
        prop="lineWriting"
        header-align="center"
        align="center"
        label="行笔路线gif图"
      >
        <template slot-scope="scope">
          <el-image
            :src="scope.row.lineWriting"
          ></el-image></template
      ></el-table-column>
      <el-table-column
        prop="cartoonWriting"
        header-align="center"
        align="center"
        label="书写动画gif图"
      >
        <template slot-scope="scope">
          <el-image
            :src="scope.row.cartoonWriting"
          ></el-image></template
      ></el-table-column>
    <el-table-column label="模板名称" align="center" prop="name">
      <template slot-scope="scope">
          <el-select v-model="scope.row.fid" placeholder="请选择笔画模板"
          @change="switchjbbhmb(scope.row.tid,scope.row.fid)">
            <el-option
              v-for="item in jbbhmbList"
              :key="item.id"
              :label="item.forworkName"
              :value="item.id">
            </el-option>
          </el-select>
      </template>
</el-table-column>
<el-table-column header-align="center" align="center" label="操作">
    <template slot-scope="scope">
          <!-- <el-button type="text" @click="addBrushCartoon(0, scope.row.id)"
              >添加基本笔画</el-button
            > -->
            <el-button style="" type="text" @click="addBrush(1, scope.row.id)"
              >修改</el-button
            >
            <!-- <el-button type="text" @click="deleteById(scope.row.id)"
              >删除</el-button
            > -->
        </template>
</el-table-column>
</el-table>
<!-- <ul class="chanpterList">
      <li v-if="brush.id != null" :model="brush" :key="brush.id">
        <p>
          <img
            v-if="brush.brushPicture"
            :src="brush.brushPicture"
            class="avatar"
          />

          <span class="acts">
            <el-button type="text" @click="addBrushCartoon(0, brush.id)"
              >添加基本笔画</el-button
            >
            <el-button style="" type="text" @click="addBrush(1, brush.id)"
              >修改</el-button
            >
          </span>
        </p>

        <ul class="chanpterList videoList">
          <li v-for="brushCartoon in brush.children" :key="brushCartoon.id">
            <p>
              {{ brushCartoon.word }}
              <span class="acts">
                <el-button
                  type="text"
                  @click="addBrushCartoon(1, brushCartoon.id)"
                  >修改</el-button
                >
                <el-button type="text" @click="deleteById2(brushCartoon.id)"
                  >删除</el-button
                >
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul> -->
<el-dialog :visible.sync="dialogBrushVisible" :title="type == 0 ? '添加笔法信息' : '修改笔法信息'">
    <el-form :rules="dataRule" ref="brushForm" :model="brush" label-width="120px">
        <el-form-item label="笔法字体图片" prop="brushPicture">
            <el-upload class="avatar-uploader" :action="'http://121.41.167.195:8000/api/oss/upload'" :show-file-list="false" :on-success="handleAvatarSuccess1">
                <img v-if="brush.brushPicture" :src="brush.brushPicture" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="行笔路线gif图" prop="lineWriting">
            <el-upload class="avatar-uploader" :action="'http://121.41.167.195:8000/api/oss/upload'" :show-file-list="false" :on-success="handleAvatarSuccess2">
                <img v-if="brush.lineWriting" :src="brush.lineWriting" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="行笔路线描述" prop="lineWritingDescription">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="行笔路线描述" v-model="brush.lineWritingDescription">
            </el-input>
        </el-form-item>
        <el-form-item label="书写动画gif图" prop="cartoonWriting">
            <el-upload class="avatar-uploader" :action="'http://121.41.167.195:8000/api/oss/upload'" :show-file-list="false" :on-success="handleAvatarSuccess3">
                <img v-if="brush.cartoonWriting" :src="brush.cartoonWriting" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="书写动画描述" prop="cartoonWritingDescription">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="书写动画描述" v-model="brush.cartoonWritingDescription">
            </el-input>
        </el-form-item>
        <!-- <el-form-item label="标准笔法视频" prop="pics">
          <el-upload
            class="upload-demo"
            ref="uploadFile"
            name="filedatas"
            :action="'http://121.41.167.195:8000/api/oss/uploadPictures'"
            :auto-upload="false"
            multiple
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取视频文件</el-button
            >
            <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >提交到服务器</el-button
            >
          </el-upload>
        </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBrushVisible = false">取 消</el-button>
        <el-button :disabled="saveBrushBtnDisabled" type="primary" @click="saveOrUpdate">确 定</el-button>
    </div>
</el-dialog>
<el-dialog :visible.sync="dialogBrushCartoonVisible" :title="type == 0 ? '添加基本笔画信息' : '修改基本笔画信息'">
    <el-form :rules="dataRule1" ref="brushCartoonForm" :model="brushCartoon" label-width="120px">
        <el-form-item label="字" prop="word">
            <el-input v-model="brushCartoon.word" />
        </el-form-item>
        <el-form-item label="顺序" prop="border">
            <el-input-number v-model="brushCartoon.border" controls-position="right" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="字视频" prop="wordVideo">
            <el-upload class="upload-uploader" :action="'http://121.41.167.195:8000/api/oss/upload'" ref="videoUpload" :on-exceed="handleExceed" :on-remove="handleRemove" :on-success="handleAudioSuccess" :before-upload="beforeVideoUpload" :show-file-list="false">
                <video :src="brushCartoon.wordVideo" controls="controls" class="avatar">
              您的浏览器不支持视频频播放
            </video>
            </el-upload>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBrushCartoonVisible = false">取 消</el-button>
        <el-button :disabled="saveBrushCartoonBtnDisabled" type="primary" @click="saveOrUpdate1">确 定</el-button>
    </div>
</el-dialog>

<div>
    <el-button @click="previous">上一步</el-button>
    <!-- <el-button :disabled="saveBtnDisabled" type="primary" @click="next"
        >完成</el-button
      > -->
</div>
</div>
</template>

<script>
    import Vue from "vue";
    export default {
        data() {
            return {
                bfList: [],
                buzhou: 3,
                bfLoading: false,
                saveBtnDisabled: false, // 保存按钮是否禁用
                brush: {
                    // 笔法对象
                    lineWriting: "",
                    lineWritingDescription: "行笔路线：运用动画形式，观察行笔线路，掌握笔顺。",
                    cartoonWriting: "",
                    cartoonWritingDescription: "书写动画：动画模拟，清楚地观察笔画的提按、粗细、转折、方圆对比，以及笔势的行笔特征。",
                    brushPicture: "",
                    tid: null,
                    id: null,
                },
                brushCartoon: {
                    id: null,
                    word: "",
                    wordVideo: "",
                    border: 1,
                    bid: null,
                },
                xzBtn: false,
                type: 0, // 0:添加1:修改
                dialogBrushVisible: false,
                saveBrushBtnDisabled: false,
                dialogBrushCartoonVisible: false,
                saveBrushCartoonBtnDisabled: false,
                dataRule: {
                    brushPicture: [{
                        required: true,
                        message: "图片不能为空"
                    }],
                    lineWriting: [{
                        required: true,
                        message: "行笔路线gif图不能为空"
                    }],
                    lineWritingDescription: [{
                        required: true,
                        message: "行笔路线描述不能为空",
                        trigger: "blur"
                    }, ],
                    cartoonWriting: [{
                        required: true,
                        message: "书写动画gif图不能为空"
                    }],
                    cartoonWritingDescription: [{
                        required: true,
                        message: "书写动画描述不能为空",
                        trigger: "blur"
                    }, ],
                    pics: [{
                        required: true,
                        message: "标准笔画视频不能为空"
                    }],
                },
                dataRule1: {
                    border: [{
                        required: true,
                        message: "顺序不能为空",
                        trigger: "blur"
                    }],
                    word: [{
                        required: true,
                        message: "字不能为空",
                        trigger: "blur"
                    }],
                    wordVideo: [{
                        required: true,
                        message: "字视频不能为空"
                    }],
                },
                jbbhmbList: []
            };
        },

        activated() {
            this.buzhou = 3;
            this.brush.tid = this.$route.params.id;
            // 有数据就要回显数据
            this.getJbbhmbList()
            this.getBrushByWordId();
        },

        methods: {
            // 获取基本笔画模板列表
            getJbbhmbList() {
                this.$http({
                    url: this.$http.adornUrl(`/sf/cbbasisstrokesformwork/getAllJbbhmbList`),
                    method: "get",
                    params: this.$http.adornParams(),
                }).then(({
                    data
                }) => {
                    if (data && data.code === 0) {
                        this.jbbhmbList = data.jbbhmbs;
                    } else {
                        this.jbbhmbList = [];
                    }
                });
            },
            buzhouChange(value) {
                switch (value) {
                    case 0:
                        // 欣赏
                        this.$router.push({
                            path: "/ruanbi/ruanbixsAdd/" + this.$route.params.id,
                        });
                        break;
                    case 1:
                        // 认读
                        this.$router.push({
                            path: "/ruanbi/ruanbirdAdd/" + this.$route.params.id,
                        });
                        break;
                    case 2:
                        // 观察
                        this.$router.push({
                            path: "/ruanbi/ruanbigcAdd/" + this.$route.params.id,
                        });
                        break;
                    case 3:
                        // 笔法
                        this.$router.push({
                            path: "/ruanbi/ruanbibfAdd/" + this.$route.params.id,
                        });
                        break;
                    case 4:
                        // 分析
                        this.$router.push({
                            path: "/ruanbi/ruanbifxAdd/" + this.$route.params.id,
                        });
                        break;
                    case 5:
                        // 对比
                        this.$router.push({
                            path: "/ruanbi/ruanbidbAdd/" + this.$route.params.id,
                        });
                        break;
                    case 6:
                        // 随堂练习
                        this.$router.push({
                            path: "/ruanbi/ruanbistlxAdd/" + this.$route.params.id,
                        });
                        break;
                    default:
                        // 视频
                        this.$router.push({
                            path: "/ruanbi/wordVideo/" + this.$route.params.id,
                        });
                        break;
                }
            },
            beforeVideoUpload(file) {
                const fileName = file.name;
                const fileType = fileName.substring(fileName.lastIndexOf("."));
                if (fileType !== ".mp4" && fileType !== ".flv") {
                    this.$message.error("上传视频频只能是mp4/flv!");
                    return false;
                }
                return true;
            },
            //上传成功后的回调函数
            handleAudioSuccess(response) {
                this.brushCartoon.wordVideo = response.url;
            },
            // 超出上传限制
            handleExceed(files, fileList) {
                this.$message.warning(`只能上传一个视频`);
            },
            // 删除音频
            handleRemove(file, fileList) {
                this.brushCartoon.wordVideo = "";
            },
            // 文件上传
            submitUpload() {
                let {
                    uploadFiles,
                    action,
                    data
                } = this.$refs.uploadFile;
                this.uploadFiles({
                    uploadFiles,
                    data,
                    action,
                    success: (response) => {
                        console.log(response);
                        // 上传成功后，将里面的内容删除
                        this.brush.pics = response.urlList;
                    },
                    error: (error) => {
                        console.log("失败了", error);
                    },
                });
            },
            uploadFiles({
                uploadFiles,
                headers,
                data,
                action,
                success,
                error
            }) {
                let form = new FormData();
                // 文件对象
                uploadFiles.map((file) => form.append("filedatas", file.raw));
                // 附件参数
                for (let key in data) {
                    form.append(key, data[key]);
                }
                let xhr = new XMLHttpRequest();
                // 异步请求
                xhr.open("post", action, true);
                // 设置请求头
                xhr.setRequestHeader("Authorization", this.$cookie.get("token"));
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) {
                        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                            success && success(JSON.parse(xhr.responseText)); // 转为json
                        } else {
                            error && error(xhr.status);
                        }
                    }
                };
                xhr.send(form);
            },
            //上传成功后的回调函数
            handleAvatarSuccess3(response) {
                this.brush.cartoonWriting = response.url;
            },
            //上传成功后的回调函数
            handleAvatarSuccess2(response) {
                this.brush.lineWriting = response.url;
            },
            //上传成功后的回调函数
            handleAvatarSuccess1(response) {
                this.brush.brushPicture = response.url;
            },
            //上传成功后的回调函数
            handleAvatarSuccess(response) {
                this.brushCartoon.brushCartoon = response.url;
            },
            getBrushByWordId() {
                this.bfLoading = true;
                this.$http({
                    url: this.$http.adornUrl(
                        `/sf/cbbrush/getBrushByWordId/${this.brush.tid}`
                    ),
                    method: "get",
                }).then(({
                    data
                }) => {
                    this.bfList = [];
                    this.xzBtn = false;
                    if (data && data.code === 0) {
                        if (data.cbBrush) {
                            this.brush = data.cbBrush;
                            console.log(this.brush)
                            this.bfList.push(this.brush);
                            this.xzBtn = true;
                        }
                    } else {
                        // this.brush = { typefaceName: "", editionCover: "", id: null };
                    }
                    this.bfLoading = false;
                });
            },
            // 章节对话框中的保存或修改
            saveOrUpdate() {
                if (this.type == 0) {
                    // 添加章节
                    this.brushFormSubmit();
                } else {
                    // 修改章节
                    this.updateBrush();
                }
            },
            // 更新章节图片信息
            updateBrush() {
                this.$refs["brushForm"].validate((valid) => {
                    if (valid) {
                        this.$http({
                            url: this.$http.adornUrl(`/sf/cbbrush/update`),
                            method: "post",
                            data: this.$http.adornData({
                                    id: this.brush.id,
                                    tid: this.brush.tid,
                                    brushPicture: this.brush.brushPicture,
                                    cartoonWritingDescription: this.brush.cartoonWritingDescription,
                                    cartoonWriting: this.brush.cartoonWriting,
                                    lineWritingDescription: this.brush.lineWritingDescription,
                                    lineWriting: this.brush.lineWriting,
                                },
                                false
                            ),
                        }).then(({
                            data
                        }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: "修改成功",
                                    type: "success",
                                    duration: 1500,
                                    onClose: () => {
                                        this.getBrushByWordId();
                                        this.dialogBrushVisible = false;
                                        this.$refs.uploadFile.clearFiles();
                                    },
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    }
                });
            },
            // 更新章节图片信息
            updateBrushCartoon() {
                this.$refs["brushCartoonForm"].validate((valid) => {
                    if (valid) {
                        this.$http({
                            url: this.$http.adornUrl(`/sf/cbbasisstrokes/update`),
                            method: "post",
                            data: this.$http.adornData({
                                    id: this.brushCartoon.id,
                                    bid: this.brushCartoon.bid,
                                    word: this.brushCartoon.word,
                                    border: this.brushCartoon.border,
                                    wordVideo: this.brushCartoon.wordVideo,
                                },
                                false
                            ),
                        }).then(({
                            data
                        }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: "修改成功",
                                    type: "success",
                                    duration: 1500,
                                    onClose: () => {
                                        this.getBrushByWordId();
                                        this.$refs.videoUpload.clearFiles();
                                        this.dialogBrushCartoonVisible = false;
                                    },
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    }
                });
            },
            // 章节图片对话框中的保存或修改
            saveOrUpdate1() {
                if (this.type == 0) {
                    // 添加章节
                    this.brushCartoonFormSubmit();
                } else {
                    // 修改章节
                    this.updateBrushCartoon();
                }
            },
            // 打开对话框，添加、修改
            addBrush(status, id) {
                // 重置表单 应该只是把表单有的清空而已
                this.$nextTick(() => {
                    this.$refs.brushForm.resetFields();
                });
                if (status == 0) {
                    // 添加
                    this.type = 0;
                    // 清空
                    this.brush.id = null;
                    this.brush.brushPicture = "";
                } else {
                    // 修改
                    this.type = 1;
                    // 回显数据
                    this.$http({
                        url: this.$http.adornUrl("/sf/cbbrush/info/" + id),
                        method: "get",
                    }).then(({
                        data
                    }) => {
                        this.brush.id = data.cbBrush.id;
                        this.brush.brushPicture = data.cbBrush.brushPicture;
                        this.brush.lineWriting = data.cbBrush.lineWriting;
                        this.brush.lineWritingDescription =
                            data.cbBrush.lineWritingDescription;
                        this.brush.cartoonWriting = data.cbBrush.cartoonWriting;
                        this.brush.cartoonWritingDescription =
                            data.cbBrush.cartoonWritingDescription;
                    });
                }
                this.dialogBrushVisible = true;
            },
            // 打开对话框，添加、修改
            addBrushCartoon(status, id) {
                // 重置表单 应该只是把表单有的清空而已
                this.$nextTick(() => {
                    this.$refs.brushCartoonForm.resetFields();
                });
                // 清空文件

                if (status == 0) {
                    // 添加
                    this.type = 0;
                    // 清空
                    this.brushCartoon.id = null;
                    this.brushCartoon.bid = id;
                    this.brushCartoon.brushCartoon = "";
                } else {
                    // 修改
                    this.type = 1;
                    // 回显数据
                    this.$http({
                        url: this.$http.adornUrl("/sf/cbbasisstrokes/info/" + id),
                        method: "get",
                    }).then(({
                        data
                    }) => {
                        this.brushCartoon.id = data.cbBasisStrokes.id;
                        this.brushCartoon.word = data.cbBasisStrokes.word;
                        this.brushCartoon.border = data.cbBasisStrokes.border;
                        this.brushCartoon.bid = data.cbBasisStrokes.bid;
                        this.brushCartoon.wordVideo = data.cbBasisStrokes.wordVideo;
                    });
                }
                this.dialogBrushCartoonVisible = true;
            },
            // 表单提交
            brushFormSubmit() {
                // 表单验证
                this.$refs["brushForm"].validate((valid) => {
                    if (valid) {
                        this.$http({
                            url: this.$http.adornUrl(`/sf/cbbrush/save`),
                            method: "post",
                            data: this.$http.adornData({
                                    cartoonWritingDescription: this.brush.cartoonWritingDescription,
                                    cartoonWriting: this.brush.cartoonWriting,
                                    lineWritingDescription: this.brush.lineWritingDescription,
                                    lineWriting: this.brush.lineWriting,
                                    brushPicture: this.brush.brushPicture,
                                    tid: this.brush.tid,
                                },
                                false
                            ),
                        }).then(({
                            data
                        }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: "添加成功",
                                    type: "success",
                                    duration: 1500,
                                    onClose: () => {
                                        // 刷新
                                        this.getBrushByWordId();
                                        // 只能添加一次
                                        this.xzBtn = true;
                                        this.dialogBrushVisible = false;
                                        this.$refs.uploadFile.clearFiles();
                                    },
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    }
                });
            },
            // 表单提交
            brushCartoonFormSubmit() {
                // 表单验证
                this.$refs["brushCartoonForm"].validate((valid) => {
                    if (valid) {
                        this.$http({
                            url: this.$http.adornUrl(`/sf/cbbasisstrokes/save`),
                            method: "post",
                            data: this.$http.adornData({
                                    bid: this.brushCartoon.bid,
                                    border: this.brushCartoon.border,
                                    word: this.brushCartoon.word,
                                    wordVideo: this.brushCartoon.wordVideo,
                                },
                                false
                            ),
                        }).then(({
                            data
                        }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: "添加成功",
                                    type: "success",
                                    duration: 1500,
                                    onClose: () => {
                                        // 刷新
                                        this.getBrushByWordId();
                                        this.$refs.videoUpload.clearFiles();
                                        this.dialogBrushCartoonVisible = false;
                                    },
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    }
                });
            },
            // 通过章节id删除章节
            deleteById(id) {
                this.$confirm(`确定对[欣赏id=${id}]进行[删除]操作?`, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(() => {
                        this.$http({
                            url: this.$http.adornUrl("/sf/cbrd/delete"),
                            method: "post",
                            data: this.$http.adornData([id], false),
                        }).then(({
                            data
                        }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: "删除成功",
                                    type: "success",
                                    duration: 1500,
                                    onClose: () => {
                                        this.getBrushByWordId();
                                    },
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    })
                    .catch(() => {});
            },
            // 通过章节id删除章节
            deleteById2(id) {
                this.$confirm(`确定对[笔法动画id=${id}]进行[删除]操作?`, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(() => {
                        this.$http({
                            url: this.$http.adornUrl("/sf/cbbasisstrokes/delete"),
                            method: "post",
                            data: this.$http.adornData([id], false),
                        }).then(({
                            data
                        }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: "删除成功",
                                    type: "success",
                                    duration: 1500,
                                    onClose: () => {
                                        this.getBrushByWordId();
                                    },
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    })
                    .catch(() => {});
            },
            // 上一步
            previous() {
                this.$router.push({
                    path: "/ruanbi/word7",
                });
            },
            next() {
                // this.$router.push({
                //   path: "/ruanbi/ruanbidbAdd/" + this.brush.tid,
                // });
                // // 记录到哪一步了和id
                // this.$cookie.set("path", "ruanbidbAdd");
                // this.$cookie.set("id", this.brush.tid);
                Vue.cookie.delete("path");
                Vue.cookie.delete("id");
                this.$router.push({
                    path: "/ruanbi/ruanbiInfo",
                });
            },
            // 切换模板
            switchjbbhmb(id, fid) {
                this.$http({
                    url: this.$http.adornUrl(`/sf/cbbrush/updateJbbhmb`),
                    method: "post",
                    data: this.$http.adornData({
                            id: id,
                            bfsid: fid,
                        },
                        false
                    ),
                }).then(({
                    data
                }) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: "修改模板成功",
                            type: "success",
                            duration: 1500,
                            onClose: () => {
                                this.getBrushByWordId();
                            },
                        });
                    } else {
                        this.$message.error(data.msg);
                    }
                });
            }
        },
    };
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    
    .chanpterList {
        position: relative;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .chanpterList li {
        position: relative;
    }
    
    .chanpterList p {
        float: left;
        font-size: 20px;
        margin: 10px 0;
        padding: 10px;
        height: 230px;
        line-height: 50px;
        width: 100%;
        border: 1px solid #ddd;
    }
    
    .chanpterList .acts {
        float: right;
        font-size: 14px;
    }
    
    .videoList {
        padding-left: 50px;
    }
    
    .videoList p {
        float: left;
        font-size: 14px;
        margin: 10px 0;
        padding: 10px;
        height: 50px;
        line-height: 30px;
        width: 100%;
        border: 1px dotted #ddd;
    }
</style>